<script lang="ts" setup>
import { ref } from 'vue'
import CustomDialog from '../CustomDialog.vue'
import EventsInfo from './EventsInfo.vue'
import { getMatterDetail } from '@/api/mission/thing'
import useFetch from '@/hooks/useFetch'
import UnitReceive from './UnitReceive.vue'
import UnitProcessInfo from './UnitProcessInfo.vue'

const props = withDefaults(
  defineProps<{
    matterId?: number
  }>(),
  {
    matterId: 0,
  },
)

const tabList = [
  {
    label: '事项信息',
    value: 1,
  },
  {
    label: '单位签收信息',
    value: 2,
  },
  {
    label: '单位办理信息',
    value: 3,
  },
]

const tabActive = ref(1)

const { loading, res: matterInfo } = useFetch<Record<string, any>>(
  getMatterDetail,
  props.matterId,
  true,
)
</script>

<template>
  <CustomDialog :options="{ title: '事件详情', z: 3444 }" :full="false">
    <template #default="{ full }">
      <div v-loading="loading" class="flex tabs">
        <div
          v-for="tab in tabList"
          :key="tab.value"
          class="tab-item"
          :class="tabActive === tab.value ? 'active' : ''"
          @click="tabActive = tab.value"
        >
          {{ tab.label }}
        </div>
      </div>
      <div v-if="tabActive === 1">
        <EventsInfo :matter-id="props.matterId" :matterInfo="matterInfo" />
      </div>
      <div v-else-if="tabActive === 2">
        <UnitReceive :matter-id="props.matterId" />
      </div>
      <div v-else-if="tabActive === 3">
        <UnitProcessInfo :matter-id="props.matterId" :full="full" />
      </div>
    </template>
  </CustomDialog>
</template>

<style lang="scss" scoped>
:deep(.el-descriptions__label:not(.is-bordered-label)) {
  color: rgba(208, 222, 238, 1) !important;
  font-size: vw(14);
  margin-right: 0;
}
:deep(.el-descriptions__content) {
  color: rgba(255, 255, 255, 1) !important;
  font-size: vw(14);
}

.tabs {
  padding: 0 0 vh(28);
  .tab-item {
    margin-right: vw(30);
    font-size: vw(18);
    font-weight: 700;
    letter-spacing: 0px;
    line-height: vh(24);
    color: rgba(108, 128, 151, 1);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 38.62%,
        rgba(47, 102, 232, 1) 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;

      border-bottom: vh(3) solid;
      box-sizing: border-box;
      border-image: linear-gradient(
          90deg,
          rgba(42, 89, 209, 0) 0%,
          rgba(42, 89, 209, 1) 47.79%,
          rgba(42, 89, 209, 0) 100%
        )
        3;
    }
  }
}

:deep(.el-descriptions__body) {
  background-color: transparent !important;
}
</style>
